<template>
  <!--  <div class="mainbox">-->
  <!--    <banner></banner>-->
  <!--    <main-content>-->
  <!--      <div slot="menu_list">-->
  <!--        <dl>-->
  <!--          <dt class="menu_dt"><span>图标</span>村情简介</dt>-->
  <!--          <dd class="menu_dd hover">莲塘文化</dd>-->
  <!--          <dd class="menu_dd">莲塘历史</dd>-->
  <!--          <dd class="menu_dd">莲塘好人</dd>-->
  <!--        </dl>-->
  <!--      </div>-->

  <!--      <div class="inner_content" slot="inner_content">-->
  <div>

    <!--<NoData v-if="flag"></NoData>-->
    <NoData v-if="lists.length==0"></NoData>

    <ul class="mall_ul">
      <li class="mall_item" v-for="item in lists">
        <div class="mall_img"><img :src="item.img"/></div>
        <div class="infos">
          <div class="infos1">
            <del class="yuan" v-if="item.price>0">{{item.price}}</del>
            <span class="label">{{item.sold}}人已兑换</span>
          </div>
          <p class="name">{{item.title}}</p>
          <p class="points">兑换积分：{{item.integral}}分</p>
        </div>
        <div class="buy_button">
          <div class="button" @click="showPopup(item.id)">扫码兑换</div>
        </div>
      </li>
    </ul>

    <div class="popup" v-show="show">
      <div class="mask"></div>
      <div class="mask_main">
        <div class="qrcode"><img :src="qrcode"/></div>
        <p class="qrcode_tip">请打开微信扫一扫兑换</p>
        <div class="close" @click="onClose"><img src="../../assets/images/page/close.png"/></div>
      </div>
    </div>
  </div>


  <!--      </div>-->

  <!--    </main-content>-->
  <!--<div class="popup" v-show="show">-->
  <!--<div class="mask_main">-->
  <!--<div class="qrcode"><img src="../../assets/images/page/qrcode.jpg"/></div>-->
  <!--<p class="qrcode_tip">请打开微信进行扫一扫登录</p>-->
  <!--<div class="close" @click="show = false"><img src="../../assets/images/page/close.png"/></div>-->
  <!--</div>-->
  <!--<div class="mask"></div>-->
  <!--</div>-->
  <!--    <footer-bar></footer-bar>-->

  <!--    <main-menu></main-menu>-->
  <!--  </div>-->
</template>

<script>
  // import Banner from '@/components/bannder/Banner';
  // import MainMenu from '@/components/mainmenu/MainMenu';
  // import mainContent from '@/components/content/mainContent';
  // import footerBar from '@/components/content/footerBar';
  import NoData from '@/components/nodata/NoData'
  export default {
    name: "points_mall",
    data() {
      return {
        flag:false,
        show: false,
        page: 1,
        limit: 1000,
        lists: [],
        qrcode: ''
      }
    },
    components: {
      NoData
    },

    created() {
      console.log('进入了积分商城！')
      this.getList();
      this.$emit('childData2',this.$route.query.activeindex);
    },

    methods: {

      getList() {
        let that = this;
        that.$http.get('/api/ScreenkApi/getGoodsScore', {
          vollege_id: that.$util.vollege_id,
          page: that.page,
          limit: that.limit
        }, r => {
          console.log('1212', r)
          that.lists = r.data.data;
          if (r.data.data.length == 0){
            this.flag=true;
          }

        })
      },

      showPopup(id) {
        console.log('商品id', id)
        let that = this;
        // pages/goods/goods_detail/goods_detail
        that.$http.get("/api/ScreenkApi/setWxQcde", {page_url: 'pages/goods/goods',vollege_id:that.$util.vollege_id,scene:id}, r => {
          console.log('生码', r)
          that.qrcode = r.data

        });
        this.show = true;
      },

      onClose() {
        this.show = false;
        clearInterval(this.timer);
        this.timer = null;
      },
    }
  }
</script>

<style scoped>

  .mall_ul {
    padding-top: 56px;
    padding-left: 57px;
    overflow: hidden;
    margin: 0 auto;
  }

  .mall_item {
    float: left;
    width: 270px;
    margin: 0 25px 30px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, .1);
  }

  .mall_img {
    width: 270px;
    height: 160px;
    text-align: center;
    overflow: hidden;
  }

  .mall_img img {
    height: 160px;
  }

  .infos {
    padding: 0 10px 10px;
    border-bottom: 1px solid #f5f5f5;
  }

  .infos .yuan {
    float: left;
    padding-top: 8px;
    font-size: 20px;
    color: #ec5151;
  }

  .infos1 {
    overflow: hidden;
  }

  .infos .label {
    float: right;
    padding-top: 9px;
    font-size: 16px;
    color: #666666;
  }

  .infos .name {
    padding-top: 8px;
    font-size: 18px;
  }

  .points {
    padding-top: 8px;
    font-size: 18px;
    color: #ffad13;
  }

  .buy_button .button {
    font-size: 24px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fe4b64;
  }
</style>

